<template>
  <van-collapse-item title="会议基本信息" name="baseInfo">
    <div class="card-container">
      <van-field
        v-model="params.topic"
        required
        label="会议主题"
        placeholder="请输入会议主题"
      />

      <select-date
        title="会议日期"
        required
        v-model="params.startDate"
      ></select-date>

      <select-time
        title="会议开始时间"
        placeholder="请选择会议开始时间"
        required
        v-model="params.startTime"
      ></select-time>

      <van-field readonly required label="会议形式">
        <template #input>
          <van-radio-group v-model="params.shape">
            <van-space wrap :size="['20px', '8px']">
              <van-radio
                v-for="item in getMapFormat('meetingType')"
                :key="item.value"
                :name="item.value"
              >{{ item.label }}</van-radio>
            </van-space>
          </van-radio-group>
        </template>
      </van-field>
    </div>
  </van-collapse-item>
</template>

<script setup>
  import { reactive, watch } from 'vue'
  import useConstant from '@/hooks/useConstant';
  const { getMapFormat } = useConstant();

  const emits = defineEmits(['updateShape'])
  const params = reactive({
    topic: '',
    startDate: '',
    startTime: '',
    shape: '1'
  })
  
  watch(() => params.shape, () => emits('updateShape'))

  defineExpose({
    getParams: () => ({
      topic: params.topic,
      shape: params.shape,
      startTime: `${params.startDate} ${params.startTime}`
    }),
    setParams (detail) {
      params.topic = detail.topic;
      params.shape = detail.shape + '' || '1';

      const startTime = detail.startTime.split(' ')
      params.startDate = startTime[0];
      params.startTime = startTime[1];

      console.log(params)
    }
  })
</script>